<template>
    <div>
        <van-field :value="value" v-bind="$attrs" readonly is-link @click="show = true" :placeholder="placeholder" :required="required" @input="val=>this.$emit('input',val)"  />
        <van-popup v-model="show" position="bottom" :overlay="true">
            <div v-if="show">
                <van-datetime-picker v-model="currentDate" :type="dateType" :title="title" :formatter="formatter" :min-date="defaultMinDate" :max-date="defaultMaxDate" @confirm="onConfirm" @cancel="show = false" />
            </div>
        </van-popup>
    </div>
</template>
<script>
import { getDate, getDateTime, formatDate2 } from "@/utils/getDate.js";
export default {
    name: "eagle-datetime-picker",
    props: {
        value: {
            type: String,
            default: "",
        },
        minDate: {
            type: Date,
            default: null,
        },
        maxDate: {
            type: Date,
            default: null,
        },
        dateType: {
            type: String,
            default: "datetime",
        },
        title: {
            type: String,
            default: "选择日期时间",
        },
        placeholder: {
            type: String,
            default: "请选择日期时间",
        },
        required: {
            type: Boolean,
            default() {
                return false;
            },
        },
    },
    data() {
        return {
            defaultMinDate: "",
            defaultMaxDate: "",
            currentDate: new Date(),
            show: false,
            dateValue: null,
        };
    },
    watch: {
        minDate:{
            immediate:true,
            handler(val){
                this.initDate()
            }
        },
        maxDate:{
            immediate:true,
            handler(val){
                this.initDate()
            }
        },
    },
    created() {
        this.initDate();
    },
    computed:{
		
	},
    methods: {
        initDate() {
            var myDate = new Date();
            var fullYear = myDate.getFullYear();
            var month = myDate.getMonth() + 1;
            let day = myDate.getDate();
            let hour = myDate.getHours();
            let minute = myDate.getMinutes();
            if (this.minDate && this.minDate != null) {
                this.defaultMinDate = this.minDate;
            } else {
                this.defaultMinDate = new Date(fullYear - 4, 0, 1, 0, 0, 0);
            }
            if (this.maxDate && this.maxDate != null) {
                this.defaultMaxDate = this.maxDate;
            } else {
                this.defaultMaxDate = new Date(fullYear + 5, 11, 31, 23, 59.59);
            }
        },
        onConfirm(val) {
            this.dateValue = formatDate2(val);
            this.$emit("input", this.dateValue);
            this.$emit("change", this.dateValue);
            this.show = false;
        },
        // 选项格式化函数
        formatter(type, value) {
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            } else if (type === "day") {
                return `${value}日`;
            } else if (type === "hour") {
                return `${value}时`;
            } else if (type === "minute") {
                return `${value}分`;
            }
            return value;
        },
    },
};
</script>
<style lang="less" scoped>
</style>